
import { useEffect, useState, useRef } from 'react';
import startPng from './star.png';
import './index.less'
const Process = (props) => {
    const { num = 0 } = props
    const [process, setProcess] = useState(0)
    const timer = useRef(null)
    useEffect(() => {
        let zongTime = 20000
        clearInterval(timer.current)
        timer.current = setInterval(() => {
            zongTime = zongTime - 200
            if (zongTime <= 0) {
                return
            }
            setProcess((process) => {
                return (process + 10) > 100 ? 100 : process + 10
            })
        }, 200)
        return () => {
            clearInterval(timer.current)
        }
    }, [])
    useEffect(() => {
        setProcess(num)

    }, [num])
    return (
        <div className="ai-process">
            <div className="wrap" style={{ width: `${process}%` }}>
                <div className="process-nei"></div>
            </div>
            <div className='start' style={{ left: `${process}%` }}>
                <img src={startPng} alt="" />
            </div>
        </div>
    )
}

export default Process